<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange" :key="itemKey">
      <el-table-column type="selection" width="55" align="center" v-if="selection" />
      <template v-for="(item, index) in tableHeader">
        <table-column v-if="item.children && item.children.length" :key="index" :coloumn-header="item"></table-column>
        <el-table-column v-else :key="index + 0" :label="item.name" :prop="item.id" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <el-input v-if="row.$isEdit" v-model="row[item.id]" :placeholder="item.name"></el-input>
            <span v-else>{{ row[item.id] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="tableTotal > 0" :total="tableTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>
<script>
import { integer } from 'vue-types';
import TableColumn from "./tableColumn.vue";

export default {
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true,
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true,
    },
    selection: {
      type: Boolean,
      default: false
    },
    tableTotal: {
      type: Number,
      required: false,
      default: 0
    }
  },
  components: {
    TableColumn,
  },
  data: () => ({
    itemKey: 0,
    // 查询参数
    queryParams: {
      pageNum: 1,  // 当前页数
      pageSize: 10,  // 每页显示几个
    },
  }),
  methods: {
    // 选择改变
    handleSelectionChange(val) {
      this.$emit('dynamicMultipleSelection_', val)
    },
    // 新增选择
    toggleSelection(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    // 分页查询
    getList(){
      this.$emit('dynamicMultiplePaging_', this.queryParams)
    }
  }
};
</script>
 
<style scoped>
.el-button {
  border: none;
  padding: 0;
  color: #606266;
}
</style>